<template>
  <el-dialog
    v-el-drag-dialog="{ drag: true, full: false, resize: false }"
    :close-on-click-modal="false"
    :visible="true"
    @close="closeMd"
    title="销假处理"
    width="30%">
    <el-form :model="fm.ps" ref="formRef" :label-width="'120px'">

      <el-form-item label="姓名">
        {{ dirverName }}
      </el-form-item>
      <el-form-item label="请假类型">
        {{ typeName }}
      </el-form-item>
      <el-form-item
        label="提前结束时间"
        prop="endTime"
        :rules="[
          { required: true, message: '请选择结束时间', trigger: 'blur' },
          { validator: valBackLeaveTime, trigger: 'blur' }
        ]">
        <el-date-picker
            style="width: 100%"
            v-model="fm.ps.endTime"
            :picker-options="pickerOptions"
            type="datetime"
            range-separator="至"
            format="yyyy-MM-dd HH:mm"
            value-format="yyyy-MM-dd HH:mm"
            placeholder="选择日期时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item
          label="提前原因"
          prop="reason"
          :rules="[{ required: true, message: '请输入提前原因', trigger: 'blur' }]">
        <el-input
            type="textarea"
            maxlength="500"
            show-word-limit
            :autosize="{ minRows: 3, maxRows: 7 }"
            placeholder="提前原因" v-model="fm.ps.reason"/>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit" :disabled="fm.sb.load">{{ fm.sb.text }}</el-button>
        <el-button @click="closeMd">关闭</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import elDragDialog from "@/directive/el-drag-dialog";
import {cancelBefore} from "@/api/services/personMan.service";


export default {
  name: "BackLeaveType",
  directives: {elDragDialog},
  props: ["myData"],
  components: {},
  data() {
    return {
      fm: {
        fname: "addGroupFm",
        ps: {
          id: '',
          endTime: '',
          reason: '',
        },
        sb: {
          load: false,
          text: "添加",
        },
      },
      typeName: '',
      dirverName: '',
      loading: false,
      leaveChild: [],
      pickerOptions:{
        disabledDate (time) {
          return time.getTime() < Date.now()  - 8.64e7
        }
      }
    };
  },
  created() {
    if (this.myData) {
      const {leaveUser, mainType, id} = this.myData
      this.dirverName = leaveUser.realName
      this.typeName = mainType.typeName
      this.fm.ps.id = id
    }
  },
  methods: {
    /* 关闭弹框 */
    closeMd() {
      this.$emit("getMdState", false);
    },
    // 销假时间验证
    valBackLeaveTime(rule, value, callback) {
      if(!value){
        return callback();
      }else{
        const that = this, U = that.U, row = that.myData;

        // 判断当前时间是否在请假起止时间内，在则能销假，不能则不能销假
        let ct = U.str2date(value);
        let leaveSt = U.str2date(row.leaveStartTime).getTime();
        let leaveEt = U.str2date(row.leaveEndTime).getTime();
        if(ct < leaveSt || ct > leaveEt){
          return callback(new Error('当前已不在请假起止时间内'));
        }else {
          return callback();
        }
      }
    },
    // 提交表单
    onSubmit() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          this.fm.sb.load = true; // 添加按钮禁用效果
          let loading = this.U.qloading("提交中，请稍后..."); // 添加遮
          cancelBefore(this.fm.ps).then((res) => {
            this.fm.sb.load = false; // 取消按钮禁用效果
            this.U.qclose(loading); // 关闭遮罩
            if (!res || res.code !== 1) {
              this.U.qerror(res.msg);
            } else {
              this.U.qsuccess(res.msg);
              this.closeMd();
              this.$emit("reloadDg");
            }
          }).catch(() => {
            this.U.qclose(loading);
          })
        }
      });
    },
  },
};
</script>